<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>overscroll-behavior-x demo</title>
    <style>
    main {
      height: 500px;
      width: 3000px;
      background-color: magenta;
      background-image: repeating-linear-gradient(to right, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 19px, rgba(0,0,0,0.5) 20px);
    }

    main > div {
      height: 300px;
      width: 500px;
      overflow: auto;
      position: relative;
      top: 100px;
      left: 100px;
      overscroll-behavior-x: contain;
    }

    div > div {
      height: 100%;
      width: 1500px;
      background-color: yellow;
      background-image: repeating-linear-gradient(to right, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 19px, rgba(0,0,0,0.5) 20px);
    }

    p {
      padding: 10px;
      background-color: rgba(255,0,0,0.5);
      margin: 0;
      width: 300px;
      position: relative;
      top: 10px;
      left: 10px;
    }
    </style>
  </head>
  <body>
      <h1>overscroll-behavior-x demo</h1>
    <main>
      <div>
        <div>
          <p><code>overscroll-behavior-x</code> has been used to make it so that when the scroll boundaries of the inner box are reached, the whole page does not begin to scroll.</p>
        </div>
      </div>
    </main>
  </body>
</html>
